<template>
  <view>
    <view class="goodsList">
      <!-- 这是一个产品 -->
      <GoodsItem v-for="item in goodsList" :key="item.goods_id" :item="item"/>
      <u-empty v-if="goodsList.length === 0" text="清先添加商品" mode="car" margin-top="180"></u-empty>
    </view>
    <view class="cartBottom u-flex">
      <u-checkbox :value="isAllChecked" @input="toggleAllChecked" shape="circle">全选</u-checkbox>
      <view class="totalPrice u-flex-1">
        合计 <text class="price">￥ {{totalPrice}}</text>
      </view>
      <view @click="toOrder" class="submitBtn">
        去结算({{totalGoodsNumber}})
      </view>
    </view>
  </view>
</template>

<script>
  import { mapState, mapGetters, mapMutations } from "vuex";
  import GoodsItem from "./components/GoodsItem.vue";
  export default {
    components: {
      GoodsItem,
    },
    computed: {
      ...mapState("cart", ["goodsList"]),
      ...mapGetters('cart', ['isAllChecked', 'totalGoodsNumber', 'totalPrice'])
    },
    methods: {
      ...mapMutations('cart', ['toggleAllChecked']),
      toOrder() {
        // if (this.goodsList.length>0) {
          // 不能判断数组长度, 有可能商品没选中
        if(this.totalGoodsNumber > 0) {
          // 跳转
          uni.navigateTo({url: '/pages/order/order'})
        }else {
          // 弹出提示
          uni.showToast({title: '请先添加商品', icon: 'none'})
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
.goodsList {
  padding: 0 34rpx 100rpx;
}
.cartBottom {
  height: 84rpx;
  padding: 0 34rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fdfdfd;
  border-top: 1px solid #f5f5f5;
  .totalPrice {
    font-size: 28rpx;
    font-weight: bold;
    margin-left: 10rpx;
    .price {
      font-size: 32rpx;
      color: $theme-color;
      font-weight: normal;
    }
  }
  .submitBtn {
    background: $theme-color;
    color: #ffffff;
    line-height: 52rpx;
    padding: 0 26rpx;
    border-radius: 26rpx;
    font-size: 22rpx;
  }
}
</style>